<template>
  <PageWrapper :title="getTitle" @back="goBack">
    <Description @register="register" class="mt-4" />
  </PageWrapper>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import { getRoleApi } from '@service/system/authority/role'
import { Description, useDescription } from '@/components/Description'
import { detailSchema } from './role.data'
import { useRoute } from 'vue-router'
import { RoleIndexGo } from '@enums/system'
import { useTabs } from '@/hooks/web/useTabs'
import { PageWrapper } from '@/components/Page'
import { useGo } from '@/hooks/web/usePage'

export default defineComponent({
  components: { Description, PageWrapper },
  setup() {
    const route = useRoute()
    const go = useGo()
    const { setTitle } = useTabs()
    const getTitle = ref('角色详情')

    const [register, { setDescProps }] = useDescription({
      title: 'RoleDetail',
      schema: detailSchema,
    })

    async function create() {
      const id = route.params.id as string | number
      const data = await getRoleApi(id)
      setDescProps({ data: data })
      getTitle.value = '角色详情:' + data?.name
      setTitle('角色详情:' + getTitle.value)
    }
    create()

    /** 返回角色主页 */
    function goBack() {
      go(RoleIndexGo)
    }

    return { register, getTitle, goBack }
  },
})
</script>
